<template>
  <ScreenLayoutWithMenu title="生产制造监控大屏">
    <div class="screen-grid grid-3x2">
      <ChartCard title="生产效率趋势" grid-area="a">
        <ECharts :option="efficiencyOption" />
      </ChartCard>
      <ChartCard title="设备状态" grid-area="b">
        <ECharts :option="deviceStatusOption" />
      </ChartCard>
      <ChartCard title="生产指标" grid-area="c">
        <div class="stats-container">
          <div class="stat-item">
            <div class="stat-value">98.5%</div>
            <div class="stat-label">设备利用率</div>
          </div>
          <div class="stat-item">
            <div class="stat-value">1,234</div>
            <div class="stat-label">日产量</div>
          </div>
          <div class="stat-item">
            <div class="stat-value">99.2%</div>
            <div class="stat-label">合格率</div>
          </div>
        </div>
      </ChartCard>
      <ChartCard title="产线分布" grid-area="d">
        <ECharts :option="productionLineOption" />
      </ChartCard>
      <ChartCard title="质量分析" grid-area="e">
        <ECharts :option="qualityOption" />
      </ChartCard>
      <ChartCard title="物料消耗" grid-area="f">
        <ECharts :option="materialOption" />
      </ChartCard>
    </div>
  </ScreenLayoutWithMenu>
</template>

<script setup>
import { ref, onMounted } from 'vue'
import ScreenLayoutWithMenu from '../components/ScreenLayoutWithMenu.vue'
import ChartCard from '../components/ChartCard.vue'
import ECharts from '../components/ECharts.vue'
import { generateRandomData, getBarOption, getLineOption, getPieOption } from '../utils/chartOptions'
import './Screen.css'

const efficiencyOption = ref({})
const deviceStatusOption = ref({})
const productionLineOption = ref({})
const qualityOption = ref({})
const materialOption = ref({})

onMounted(() => {
  const days = Array.from({ length: 30 }, (_, i) => `${i + 1}日`)
  
  efficiencyOption.value = getLineOption({
    categories: days,
    series: [{
      name: '效率',
      data: Array.from({ length: 30 }, () => Math.floor(Math.random() * 20) + 80)
    }]
  })

  deviceStatusOption.value = getBarOption({
    categories: ['运行中', '待机', '维护中', '故障'],
    series: [{
      name: '设备数',
      data: [85, 10, 3, 2]
    }]
  })

  productionLineOption.value = getPieOption({
    name: '产线',
    data: [
      { value: 450, name: '产线A' },
      { value: 380, name: '产线B' },
      { value: 280, name: '产线C' },
      { value: 124, name: '产线D' }
    ]
  })

  qualityOption.value = getBarOption({
    categories: ['合格', '返工', '报废'],
    series: [{
      name: '数量',
      data: [1200, 15, 3]
    }]
  })

  materialOption.value = getPieOption({
    name: '物料',
    data: [
      { value: 500, name: '原材料A' },
      { value: 400, name: '原材料B' },
      { value: 300, name: '原材料C' },
      { value: 200, name: '其他' }
    ]
  })
})
</script>
